<template>
    <div class="container">
      <jm-head ref="head"></jm-head>
        <van-address-edit
            :area-list="areaList"
            show-postal
            :show-delete = "showDelete"
            :show-postal = "false"
            delete-button-text="删除"
            :address-info="addressInfo"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
        />
    </div>
</template>
<script>
    import Vue from 'vue'
    import { Toast,AddressEdit } from 'vant';
    import areaList from '@/assets/js/area';
    import { change, deleteAddr } from "@/api/address";
    import JmHead from '../head/head'

    Vue.use(AddressEdit)
    export default {
        name: "addrAdd",
        components: {
            JmHead
        },
        data() {
            return {
                areaList,
                addressInfo: {},
                showDelete: false,
                form:{
                    id: 'new'
                }
            };
        },
        activated() {
            this.initData()
            this.$refs.head.setNavBarUrl()
        },
        methods: {
            onSave(e) {
                this.form.accepter_name = e.name
                this.form.accepter_phone = e.tel
                this.form.province_name = e.province
                this.form.city_name = e.city
                this.form.district_name = e.county
                this.form.detail_address = e.addressDetail
                this.form.national_code = e.areaCode
                this.form.isDefault = e.isDefault === true ? 1 : 0

                change(this.form).then(res => {
                    if (res.code === 20000) {
                        Toast.success({message: '保存成功', duration: 2000})
                        this.$router.go(-1)
                    } else {
                        Toast.fail({message: res.info, duration: 2000})
                    }
                })
            },
            onDelete() {
                deleteAddr({id: this.form.id}).then(res => {
                    if (res.code === 20000) {
                        Toast.success({message: '删除成功', duration: 2000})
                        this.$router.go(-1);
                    }
                })
            },
            initData() {
                this.addressInfo = {}
                this.showDelete = false
                const id = this.$route.query.id
                if (id !== 'new') {
                    this.showDelete =  true,
                    this.addressInfo.id = this.$route.query.id
                    this.addressInfo.name = this.$route.query.accepter_name
                    this.addressInfo.tel = this.$route.query.accepter_phone
                    this.addressInfo.province = this.$route.query.province_name
                    this.addressInfo.city = this.$route.query.city_name
                    this.addressInfo.county = this.$route.query.district_name
                    this.addressInfo.addressDetail = this.$route.query.detail_address
                    this.addressInfo.areaCode = this.$route.query.national_code.toString()
                    this.addressInfo.isDefault = this.$route.query.isDefault === 1 ? true : false
                }
                this.form.id = id
            }

        },
    };
</script>

<style lang="stylus" scoped>
    .container >>> .van-switch--on
        background-color #d64532!important

</style>
